<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        width: 100%;
        height: 100%;
        background: white;
      }
      .navigation {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
           -moz-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-align: center;
        -webkit-align-items: center;
           -moz-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        padding: 0.2rem;
        font-size: 0.32rem;
        color: #A6A6A6;
        line-height: 0.45rem;
      }
      .title {
        font-weight: bold;
        color: #000;
      }
      P {
        width: 5rem;
        -o-text-overflow: ellipsis;
           text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .navigation_des {
        -webkit-flex-shrink: 1;
            -ms-flex-negative: 1;
                flex-shrink: 1;
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
           -moz-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
      }
      .navigation_img {
        -webkit-flex-shrink: 0;
            -ms-flex-negative: 0;
                flex-shrink: 0;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
           -moz-box-flex: 0;
            -ms-flex-positive: 0;
                flex-grow: 0;
        width: 1.2rem;
        height: 1.2rem;
      }
    </style>
  </head>
  <body>
    <div class="navigation">
      <div class="navigation_des">
        <p class="title">
          <span id="navName">-</span>
          (<span id="navArea">-</span>)
        </p>
        <p id="navAddress">-</p>
      </div>
      <img class="navigation_img" id="navigation" src="./navigation.png" alt="导航">
    </div>
  </body>
  <script>
    !function (w) {
      var e = w.document,
        t = e.documentElement,
        i = 750,
        o = "orientationchange" in w ? "orientationchange" : "resize",
        a = function () {
          var cw = t.clientWidth || document.body.clientWidth;
          t.style.fontSize = cw / i * 100 + "px"
        };
      e.addEventListener && (w.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1));
      e.body.style.fontSize = '0.28rem';
    }(window);
    apiready = function () {
      api.addEventListener({
        name: 'navigationDesEvent',
      }, function (ret) {
        console.log('receipt form navigationDesEvent:' + JSON.stringify(ret))
        if (ret) {
          document.getElementById('navName').innerText = ret.value.name
          document.getElementById('navArea').innerText = ret.value.area
          document.getElementById('navAddress').innerText = ret.value.address
        }
      })
      document.getElementById('navigation').onclick = function () {
        api.sendEvent({
          name: 'mapNavigation',
          extra: {
            type: 'nav'
          }
        })
      }
    }
  </script>
</html>
